<template>
  <div class="container">
    <div class="box">
      <div class="desc-project">
        <div class="item-personal">
          <div class="title">
            <div class="index">序号</div>
            <div class="title-header">
              <div>用户名</div>
              <div>手机号</div>
            </div>
          </div>
          <vue-seamless-scroll
            :data="boxList"
            class="seamless-warp"
            :class-option="classOption"
          >
            <div
              class="item-warp"
              v-for="(item, index) in boxList"
              :key="index"
              :style="{ background: item.bgColor }"
            >
              <div class="item-index">{{ index + 1 }}</div>
              <div class="item">
                <div class="nickname">
                  {{ item.userName ? item.userName : "" }}
                </div>
                <div class="mobile">
                  {{ item.mobile }}
                </div>
              </div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
      <!-- <transition name="fade" mode="out-in">
        <div class="no-warn-info" v-show="boxList.length <= 0">
          <img :src="wugj" />
          <div>暂无告警</div>
        </div>
      </transition> -->
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "",
  props: ["userIds"],
  components: {
    vueSeamlessScroll,
  },
  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  watch: {
    userIds: {
      handler(val) {
        if (val.length > 0) {
          val.forEach((item, index) => {
            if (index % 2 == 0) {
              item.bgColor = "rgba(1, 40, 206, 0.2)";
            } else {
              item.bgColor = "rgba(7, 24, 97, 0)";
            }
          });
          this.boxList = val;
        } else {
          this.boxList = [];
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      boxList: [
        {
          bgColor: "rgba(1, 40, 206, 0.2)",
          name: "cscs",
          id: "1233",
        },
      ],
      defaultOption() {
        return {
          step: 0.2, // 数值越大速度滚动越快
          limitMoveNum: 4, // 开始无缝滚动的数据量
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        };
      },
    };
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}
.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}
.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginTop (@px, @attr: margin-top) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}
.container {
  height: 100%;
  background-color: transparent;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  .box {
    .marginBottom(10);
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .fontSize(14);
    color: #f1f1f1;
  }
}

.desc-project {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .item-personal {
    height: 100%;
  }

  // 轮播表标题
  .title {
    height: 4vh;
    width: 100%;
    line-height: 4vh;
    background-color: rgba(16, 36, 99, 0.6);
    display: flex;
    justify-content: space-between;
    .fontSize(14);
    box-shadow: 0 0.1vh 0.5vh rgba(4, 52, 209, 0.4);
    .index {
      height: 4vh;
      flex: 1;
      text-align: center;
      line-height: 4vh;
      color: #777;
      color: #f1f1f1;
    }
    .title-header {
      text-align: center;
      height: 4vh;
      flex: 9;
      line-height: 4vh;
      color: #ccc;
      color: #f1f1f1;
      display: flex;
      justify-content: space-around;
      .fontSize(14);
      display: flex;
      div {
        flex: 1;
      }
    }
  }

  // 轮播表
  .seamless-warp {
    width: 100%;
    height: calc(100% - 4vh);
    overflow: hidden;
    .item-warp {
      display: flex;
      background-color: rgba(1, 40, 206, 0.2);

      .item-index {
        flex: 1;
        height: 5vh;
        line-height: 5vh;
        text-align: center;
        .fontSize(14);
        // color: #777;
        color: #f1f1f1;
      }
      .item {
        flex: 9;
        height: 5vh;
        display: flex;
        justify-content: space-around;
        align-items: center;
        // color: #999;
        color: #f1f1f1;
        .fontSize(14);

        .nickname {
          flex: 1;
          height: 5vh;
          line-height: 5vh;
          text-align: center;
        }

        .mobile {
          flex: 1;
          text-align: center;
        }
      }
    }
  }
}
</style>
